<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
  <style>
    .container {
      box-sizing: border-box;
      margin: 20px auto;
      width: 400px;
      padding: 10px;
      border: 1px solid red;
    }

    .container h2 {
      font-size: 20px;
      text-align: center;
      border-bottom: 1px dashed gainsboro;
      padding-bottom: 10px;
      color: orangered;
      font-weight: 600;
    }
  </style>
</head>

<body>
  <!-- 
    父组件把信息传递给子组件，基于props进行传递
    - 默认传递给子组件的属性值都是字符串类型的，如果需要传递你想要的指定的数据格式，我们要基于v-bind:实现，(他就可以从父组件的data中取值，哪怕你不想从data中取值，想川传递一个指定类型的值，也要加上v-bind)
   -->
  
  <div id="app">
    {{w}}
    <!-- 父传子 -->
    <my-vote  :title = 'msg' :ss = 1 ></my-vote>
    <!-- <my-vote title="给摩托车投票"></my-vote>
    <my-vote  title="给轮椅投票"></my-vote> -->

  </div>
  

  <template id="vote">
    <div class="container">
      <h2>{{title}} (<span>0</span>)</h2>
      <my-vote-content ></my-vote-content>
      <my-vote-footer></my-vote-footer>
    </div>
  </template>

  <template id="voteContent">
    <div class="content">
      <p>支持人数：<span>0</span></p>
      <p>反对人数：<span>0</span></p>
      <p>支持率：<span>0%</span></p>
    </div>
  </template>

  <template id="voteFooter">
    <div class="footer">
      <button type="button" class="btn btn-success" style="margin-right: 30px;">支持</button>
      <button type="button" class="btn btn-danger">反对</button>
    </div>
  </template>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>

    let myVoteContent = {
      template: '#voteContent',
      data() {
        return {

        }
      }
    };

    let myVoteFooter = {
      template: '#voteFooter',
      data() {
        return {

        }
      }
    };



    let myVote = {
      template: '#vote',
      // 1、在子组件中设置props来接收父组件传递过来的属性信息，：在props中注册一下就可以，接收以后的属性和data中的属性就一样了，都会挂载到当前组件的实例上

      ///2、如果父组件传递的属性名是带-的，那接收的时候要按照驼峰命名法的格式进行接收

      // props: ['title','ss','itemIndex'], 

      // 以这种形式接受父组件传递过来的属性，可以对属性的类型进行校验，如果校验不通过，页面照样可以进行渲染，但是控制台会抛出校验错误的警告，如果你想传递指定的数据类型值，那就在传递的时候加上v-bind:
      // props:{
      //   title:Number,
      //   ss:String
      // },
      props:{
        title:{
          type: String,
          default:'我是默认值' // 如果父组件没有传递这个属性，那就走默认值
        },
        ss:{
          type:[String,Number],
          // required: true // 改属性是毕传的

          // 当前函数可以进行自定义校验，如果返回true那就是校验成功，如果返回false，那就是校验失败
          // validator(val){ // val代表当前的属性值
          //     return val>=5;
          // }
        }
      },
      data() {
        return {
          
        }
      },
      components:{
          myVoteContent,
          myVoteFooter
      },
      // created() {
      //   // console.log(this)
      //   // 这是vue的单向数据流，以后你的父组件更新了，那你之前在子组件改的 '哈哈'会被覆盖的 
      //   // this.title = '哈哈'
      //   console.log('son-created')
      // },
      // beforeCreate() {
      //   console.log('son-beforeCreate')
      // },
      // beforeMount() {
      //   console.log('son-beforeMount')
      // },
      // mounted() {
      //   console.log('son-mounted')
      // },
      // beforeUpdate() {
      //   console.log('son-beforeUpdate')
      // },
      // updated() {
      //   console.log('son-updated')
      // }
    };

    let vm = new Vue({
      el: '#app',
      data: {
        msg:'我是父组件',
        w:100
      },
      components: {
        myVote
      },
      // beforeCreate() {
      //   console.log('father-beforeCreate')
      // },
      // created(){
      //   console.log('father-created')
      // },
      // beforeMount() {
      //   console.log('father-beforeMount')
      // },
      // mounted() {
      //   console.log('father-mounted')
      // },
      // beforeUpdate() {
      //   console.log('father-beforeUpdate')
      // },
      // updated() {
      //   console.log('father-updated')
      // }

    })

    // 子父组件的初始化渲染生命周期函数执行的过程
    // father-beforeCreate -->father-created--> father-beforeMount-->(son-beforeCreate-->son-created-->son-beforeMount-->son-mounted)-->father-mounted
    // 父组件更高data
    // father-beforeUpdate -->(son-beforeUpdate-->son-updated)-->father-updated
  </script>
</body>

</html>